<template>
  <div>
     <div>
        <textarea v-model="message"></textarea>
        <button @click="send()" :disabled="disabledSend">发送</button>
     </div>
    <div>
      <ul>
        <li v-for="(item,index) in messageList" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message:"",
      messageList:[],
      scoket: null,
      disabledSend:false
    };
  },
  created() {
    this.initWebScoket();
  },
  methods: {
    send(){
      this.messageList.push("我:"+this.message)
      this.websocketsend(this.message)
    },
    initWebScoket() {
      this.scoket = new WebSocket("ws://localhost:6601/");
      this.scoket.binaryType = "arraybuffer";
      this.scoket.onmessage = this.websocketonmessage;
      this.scoket.onopen = this.websocketonopen;
      this.scoket.onerror = this.websocketonerror;
      this.scoket.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      this.messageList.push("连接成功....")
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      this.messageList.push("服务器:"+this.decode(e))
    },
    websocketsend(data) {
      //数据发送
      this.scoket.send(this.encode(this.stringToByte(data)));
    },
    websocketclose(e) {
      //关闭
      this.messageList.push("连接已关闭....")
      this.disabledSend=true
    },
    encode(bytes) {
      var buffer = new ArrayBuffer(bytes.length);
      var view = new DataView(buffer);
      for (var i = 0; i < bytes.length; i++) {
        view.setUint8(i, bytes[i]);
      }
      return view;
    },
    decode(e){
      var view = new Uint8Array(e.data);
      return this.byteToString(view);
    },
    stringToByte(str) {
      var bytes = new Array();
      var len, c;
      len = str.length;
      for (var i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if (c >= 0x010000 && c <= 0x10ffff) {
          bytes.push(((c >> 18) & 0x07) | 0xf0);
          bytes.push(((c >> 12) & 0x3f) | 0x80);
          bytes.push(((c >> 6) & 0x3f) | 0x80);
          bytes.push((c & 0x3f) | 0x80);
        } else if (c >= 0x000800 && c <= 0x00ffff) {
          bytes.push(((c >> 12) & 0x0f) | 0xe0);
          bytes.push(((c >> 6) & 0x3f) | 0x80);
          bytes.push((c & 0x3f) | 0x80);
        } else if (c >= 0x000080 && c <= 0x0007ff) {
          bytes.push(((c >> 6) & 0x1f) | 0xc0);
          bytes.push((c & 0x3f) | 0x80);
        } else {
          bytes.push(c & 0xff);
        }
      }
      return bytes;
    },
    byteToString(arr) {
      if (typeof arr === "string") {
        return arr;
      }
      var str = "",
        _arr = arr;
      for (var i = 0; i < _arr.length; i++) {
        var one = _arr[i].toString(2),
          v = one.match(/^1+?(?=0)/);
        if (v && one.length == 8) {
          var bytesLength = v[0].length;
          var store = _arr[i].toString(2).slice(7 - bytesLength);
          for (var st = 1; st < bytesLength; st++) {
            store += _arr[st + i].toString(2).slice(2);
          }
          str += String.fromCharCode(parseInt(store, 2));
          i += bytesLength - 1;
        } else {
          str += String.fromCharCode(_arr[i]);
        }
      }
      return str;
    }
  }
};
</script>
<style scoped>
</style>
